Vue.component('my-tree-menu', {
    //组件的属性
    data: function () {
        return {
            menuList: [
                {
                    title: '选项1',
                    list: [
                        '选项1-子选项1',
                        '选项1-子选项2',
                        '选项1-子选项3'
                    ],
                    //控制当前的子菜单是否显示
                    isShow: false

                },
                {
                    title: '选项2',
                    list: [
                        '选项2-子选项1',
                        '选项2-子选项2',
                        '选项2-子选项3'
                    ],
                    isShow: false
                },
                {
                    title: '选项3',
                    list: [
                        '选项3-子选项1',
                        '选项3-子选项2',
                        '选项3-子选项3'
                    ],
                    isShow: false
                }
            ]
        }
    },
    //组件的模板部分
    template: '<div><div class="menu" v-for="(item,index) in menuList" :key="index">\n' +
        '          <div class="menu_title" @click="changeMenu(index)">{{item.title}}</div>\n' +
        '          <div class="menu_sub" v-show="item.isShow" v-for="(subItem,index2) in item.list" :key="index2" @click="showMenuInfo(index,index2)">\n' +
        '              {{subItem}}\n' +
        '          </div>\n' +
        '      </div></div>',

    methods: {
        changeMenu(index) {

            //1.首先让所有的子菜单先隐藏
            for (let i = 0; i < this.menuList.length; i++) {
                if (i != index) {
                    this.menuList[i].isShow = false;
                }
            }

            //2.你点那个把那个子菜单状态取反。
            this.menuList[index].isShow = !this.menuList[index].isShow
        },
        showMenuInfo(index, index2) {
            console.log(this.menuList[index].list[index2]);
        }
    }
})
